<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            captchaLoad()
        })

        /**
         * 加载验证码
         */
        function captchaLoad(){
            $.ajax({
                url:"captchaImage?"+Math.random(),
                dataType:'json',
                success:function (res) {
                    $("#img").attr("src",res.data.img)
                    $('#uuid').val(res.data.uuid)
                }
            })
        }

        /**
         * 提交
         */
        function doSubmit(){
            $.ajax({
                url:"captchaCheck",
                data:{
                    uuid:$("#uuid").val(),
                    code:$("#code").val()
                },
                dataType:'json',
                success:function (res) {
                    alert(res.msg)
                    if (res.status != 200){
                        captchaLoad()
                    }
                }
            })
        }
    </script>
</head>
<body>
    验证码：
    <input type="text" id="code">
    <img src="" id="img" onclick="captchaLoad()">
    <input type="hidden" id="uuid">

    <button onclick="doSubmit()">提交</button>
</body>
</html>